<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

    <!-- 富文本编辑器 -->
    <link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css"/>
    <script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
    <script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>


</head>

<body class="hold-transition skin-red sidebar-mini">

<!-- 正文区域 -->
<section class="content">

    <div class="box-body">

        <!--tab页-->
        <div class="nav-tabs-custom">

            <!--tab头-->
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">商品基本信息</a>
                </li>
                <li>
                    <a href="#pic_upload" data-toggle="tab">商品图片</a>
                </li>
                <li>
                    <a href="#customAttribute" data-toggle="tab">扩展属性</a>
                </li>
                <li>
                    <a href="#spec" data-toggle="tab">规格</a>
                </li>
            </ul>
            <!--tab头/-->

            <!--tab内容-->
            <div class="tab-content">

                <!--表单内容-->
                <div class="tab-pane active" id="home">
                    <div class="row data-type">
                        <div class="col-md-2 title">商品分类</div>
                        <div class="col-md-10 data">
                            <table>
                                <tr>
                                    <td>
                                        <select id="cate1" class="form-control" onchange="getCate2()">
                                            <option id="option1">请选择分类-1</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select id="cate2" class="form-control select-sm"  onchange="getCate3()">
                                            <option id="option2">请选择分类-2</option>

                                        </select>
                                    </td>
                                    <td>
                                        <select id="cate3" class="form-control select-sm"  onchange="getBrand()">
                                            <option id="option3">请选择分类-3</option>

                                        </select>
                                    </td>
                                    <td>
                                        &nbsp;&nbsp;商品ID:&nbsp;
                                    </td>
                                    <td>
                                        <span id="pId">添加商品后自动生成</span>
                                    </td>
                                </tr>
                            </table>
                        </div>

                        <div class="col-md-2 title">商品名称</div>
                        <div class="col-md-10 data">
                            <input id="pName" type="text" class="form-control" placeholder="商品名称" value="">
                        </div>

                        <div class="col-md-2 title">品牌</div>
                        <div class="col-md-10 data">
                            <select id="brand" class="form-control">
                                <option>请选择品牌</option>
                            </select>
                        </div>

                        <div class="col-md-2 title">副标题</div>
                        <div class="col-md-10 data">
                            <input id="subTitle" type="text" class="form-control" placeholder="副标题" value="">
                        </div>

                        <div class="col-md-2 title">价格</div>
                        <div class="col-md-10 data">
                            <div class="input-group">
                                <span class="input-group-addon">¥</span>
                                <input id="price" type="text" class="form-control" placeholder="价格" value="">
                            </div>
                        </div>

                        <div class="col-md-2 title editer">商品介绍</div>
                        <div class="col-md-10 data editer">
                            <textarea id="pDesc" name="content" style="width:800px;height:300px;visibility:hidden;"></textarea>
                        </div>

                        <div class="col-md-2 title rowHeight2x">包装列表</div>
                        <div class="col-md-10 data rowHeight2x">

                            <textarea id="packingList" rows="3" class="form-control" placeholder="包装列表"></textarea>
                        </div>

                        <div class="col-md-2 title rowHeight2x">售后服务</div>
                        <div class="col-md-10 data rowHeight2x">
                            <textarea id="afterSale" rows="3" class="form-control" placeholder="售后服务"></textarea>
                        </div>

                    </div>
                </div>

                <!--图片上传-->
                <div class="tab-pane" id="pic_upload">
                    <div class="row data-type">
                        <!-- 颜色图片 -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"
                                    data-toggle="modal"><i class="fa fa-file-o"></i> 新建
                            </button>

                        </div>

                        <table class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="sorting">颜色</th>
                                <th class="sorting">图片</th>
                                <th class="sorting">操作</th>
                            </tr>
                            </thead>
                            <!-- 展示商品图片区域 -->
                            <tbody>
                            <tr>
                                <td></td>
                                <td><img alt="" src="" width="100px" height="100px"></td>
                                <td>
                                    <button type="button" class="btn btn-default" title="删除"><i
                                            class="fa fa-trash-o"></i> 删除
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                            <!-- 展示商品图片区域结束 -->
                        </table>

                    </div>
                </div>

                <!--扩展属性-->
                <div class="tab-pane" id="customAttribute">
                    <div class="row data-type">
                        <div>
                            <div class="col-md-2 title">扩展属性1</div>
                            <div class="col-md-10 data">
                                <input class="form-control" placeholder="扩展属性1">
                            </div>
                        </div>
                        <div>
                            <div class="col-md-2 title">扩展属性2</div>
                            <div class="col-md-10 data">
                                <input class="form-control" placeholder="扩展属性2">
                            </div>
                        </div>
                    </div>
                </div>

                <!--规格-->
                <div class="tab-pane" id="spec">
                    <div class="row data-type">
                        <div class="col-md-2 title">是否启用规格</div>
                        <div class="col-md-10 data">
                            <input type="checkbox">
                        </div>
                    </div>
                    <p>

                    <div>

                        <div class="row data-type">

                            <div>
                                <div class="col-md-2 title">屏幕尺寸</div>
                                <div class="col-md-10 data">
					                               
					                            <span>
					                            	<input type="checkbox">4.0
					                            </span>
                                    <span>
					                            	<input type="checkbox">4.5
					                            </span>
                                    <span>
					                            	<input type="checkbox">5.0
					                            </span>

                                </div>
                            </div>
                            <div>
                                <div class="col-md-2 title">网络制式</div>
                                <div class="col-md-10 data">
					                               
					                            <span>
					                            	<input type="checkbox">2G
					                            </span>
                                    <span>
					                            	<input type="checkbox">3G
					                            </span>
                                    <span>
					                            	<input type="checkbox">4G
					                            </span>

                                </div>
                            </div>

                        </div>


                        <div class="row data-type">
                            <table class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                <tr>
                                    <th class="sorting">屏幕尺寸</th>
                                    <th class="sorting">网络制式</th>
                                    <th class="sorting">价格</th>
                                    <th class="sorting">库存</th>
                                    <th class="sorting">是否启用</th>
                                    <th class="sorting">是否默认</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        4.0
                                    </td>
                                    <td>
                                        3G
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="价格">
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="库存数量">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        4.0
                                    </td>
                                    <td>
                                        4G
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="价格">
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="库存数量">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        5.0
                                    </td>
                                    <td>
                                        3G
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="价格">
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="库存数量">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        5.0
                                    </td>
                                    <td>
                                        4G
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="价格">
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="库存数量">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                </tr>

                                </tbody>
                            </table>

                        </div>

                    </div>
                </div>

            </div>
            <!--tab内容/-->
            <!--表单内容/-->

        </div>


    </div>
    <div class="btn-toolbar list-toolbar">
        <button class="btn btn-primary" onclick="toGoodsPage()"><i class="fa fa-save"></i>保存</button>
        <button class="btn btn-default" onclick="toGoodsPage()">返回列表</button>
    </div>

</section>


<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">上传商品图片</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped">
                    <tr>
                        <td>颜色</td>
                        <td><input class="form-control" placeholder="颜色"></td>
                    </tr>
                    <tr>
                        <td>商品图片</td>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <input type="file" id="file" accept=".jpg,.jpeg,.png"/>
                                        <button class="btn btn-primary" type="button" onclick="uploadFile()">
                                            上传
                                        </button>
                                    </td>
                                    <td>
                                        <img id="uploadImg" src="" width="200px" height="200px">
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>


<!-- 正文区域 /-->

<script type="text/javascript">
    // 三级联动分类

    $.ajax({
        url: "http://localhost:8080/ecproject_war/selectAllCate1s",
        success: function (data) {
            $("#cate1").length = 0;
            var tempStr = "<option id=\"option1\">请选择分类-1</option>";
            for (var i = 0; i < data.length; i++) {
                tempStr += "<option id='ca" + data[i].id + "' value='" + data[i].id + "'>" + data[i].name + "</option>";
            }
            $("#cate1").html(tempStr);
        },
        dataType: "json"
    });

    function getCate2 () {
        $.ajax({
            url: "http://localhost:8080/ecproject_war/selectCate2ByPid",
            data: "pid=" + $("#cate1 option:selected").prop("value"),
            success: function (data) {
                $("#cate2").length = 0;
                $("#cate3").html("<option id=\"option3\">请选择分类-3</option>");
                $("#brand").html("<option id=\"brand\">请选择品牌</option>");
                var tempStr = "<option id=\"option2\">请选择分类-2</option>";
                for (var i = 0; i < data.length; i++) {
                    tempStr += "<option id='cb" + data[i].id + "' value='" + data[i].id + "'>" + data[i].name + "</option>";
                }
                $("#cate2").html(tempStr);
            },
            dataType: "json"
        });
    }

    function getCate3 () {
        $.ajax({
            url: "http://localhost:8080/ecproject_war/selectCate3ByPid",
            data: "pid=" + $("#cate2 option:selected").prop("value"),
            success: function (data) {
                $("#cate3").length = 0;
                $("#brand").html("<option id=\"brand\">请选择品牌</option>");
                var tempStr = "<option id=\"option3\">请选择分类-3</option>";
                for (var i = 0; i < data.length; i++) {
                    tempStr += "<option id='cc" + data[i].id + "' value='" + data[i].id + "'>" + data[i].name + "</option>";
                }
                $("#cate3").html(tempStr);
            },
            dataType: "json"
        });
    }

    function getBrand () {
        $.ajax({
            url: "http://localhost:8080/ecproject_war/selectAllBrandsByCate3Id",
            data: "id=" + $("#cate3 option:selected").prop("value"),
            success: function (data) {
                $("#brand").length = 0;
                var tempStr = "<option id=\"brand\">请选择品牌</option>";
                for (var i = 0; i < data.length; i++) {
                    tempStr += "<option id='cc" + data[i].id + "' value='" + data[i].id + "'>" + data[i].name + "</option>";
                }
                $("#brand").html(tempStr);
            },
            dataType: "json"
        });
    }



    // 获取修改信息
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager: true
        });
    });
    window.onload = function () {
        //location对象可以获取当前页面的URL地址，它的search属性可以获取？后面的部分（含？）
        var id = JSON.parse(window.decodeURIComponent(location.search.split("=")[1]));
        //取得=后面的字符串，反编码后再转回原来的json对象
        // document.getElementById("demo1").innerHTML="方法1传过来了，我可以获取name="+student1.name;
        if (id != 0) {
            $.ajax({
                url: "http://localhost:8080/ecproject_war/selectProductById",
                data: "id=" + id,
                success: function (data) {
                    $("#pId").text(id);
                    $("#pName").prop("value", data.name);
                    $("#brand").prop("value", data.brand);
                    $("#subTitle").prop("value", data.subtitle);
                    $("#price").prop("value", data.price);
                    // alert("data.description: " + data.description +
                    //     "\ndata.packingList: " + data.packingList +
                    //     "\ndata.afterSalesService: " + data.afterSalesService);
                    $("#pDesc").val(data.description);
                    $("body.ke-content").val(data.description);
                    // $("#pDesc").visibility = "visible";
                    // TODO
                    $("#packingList").val(data.packingList);
                    $("#afterSale").val(data.afterSalesService);
                },
                dataType: "json"
            });
        }
    }

    function loadCategoryList() {

    }

    function loadBrandList() {

    }

</script>

<script>
    // 返回商品页
    function toGoodsPage(code) {
        // code为0表示新增, 1表示修改
        window.location.href = 'goods.html';
    }

    // 上传文件
    $("#file").change(function () {
        console.log($("#file")[0].files);
    });


    function uploadFile() {
        var file = $("#file")[0].files;
        if (file.length <= 0) {
            alert('请上传文件');
            return;
        }
        // var fd = new FormData();
        // fd.append("afile", file[0]);
        $.ajax({
            url: "http://localhost:8080/ecproject_war/uploadFile",
            data: "uploadFile=" + file[0],
            success: function (){alert("上传成功" + file[0])},
            dataType: "json",
            cache: false,			//上传文件无需缓存
            processData: false,		//用于对data参数进行序列化处理 这里必须false
            contentType: false
        });
        // $("uploadImg").src = file.dir
        // var msg="${msg}";
        // if(msg!=""){
        // 	alert(msg);
        // }
    }


</script>

</body>

</html>